<!--
 * @Author: wang_changtan 2196064304@qq.com
 * @Date: 2024-02-21 11:44:11
 * @LastEditors: wang_changtan 2196064304@qq.com
 * @LastEditTime: 2024-02-26 14:36:39
 * @FilePath: /web_music_app_vue3_vite_ts/src/views/aside/boke/index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div class="singer">
        <div class="tab">
            <div class="title">语种：</div>
            <div class="t_item">
                <div class="item_name" :class="item.key === datas.langKey ? 'active' : ''"
                    v-for="(item, index) in datas.lang" :key="index" @click="itemClick(item)">
                    {{ item.name }}
                </div>
            </div>
        </div>
        <div class="tab" style="padding-top: 10px;">
            <div class="title">分类：</div>
            <div class="t_item">
                <div class="item_name" :class="item.key === datas.langKey ? 'active' : ''"
                    v-for="(item, index) in datas.types" :key="index" @click="itemClick(item)">
                    {{ item.name }}
                </div>
            </div>
        </div>
        <el-row :gutter="20">
            <el-col :span="4" v-for="(item, i) in datas.dataArr" :key="i">
                <div class="item-grid">
                    <div class="g-item">
                        <div class="g-item-img">
                            
                        </div>
                        <div class="g-i-desc">林俊杰</div>
                    </div>
                </div>
            </el-col>
        </el-row>
    </div>

</template>

<script setup lang="ts">
import { reactive, ref } from 'vue';

let datas = reactive({
    langKey: 'all',
    lang: [
        {name: '全部', key: 'all'},
        {name: '华语', key: 'huayu'},
        {name: '欧美', key: 'omei'},
        {name: '日本', key: 'jup'},
        {name: '其他', key: 'other'},
    ],
    typeKey:'all',
    types: [
        {name: '全部',key:'all'},
        {name: '男歌手', key:'man'},
        {name: '女歌手',key:'wman'},
        {name: '乐队组合', key: 'setup'},
    ],
    dataArr: [
        { name: "xxxx", number: 1111 }
    ]
})

function itemClick(item){}


</script>
<style scoped lang="less">
.singer {
    padding: 20px 30px;
    .tab {
        display: flex;
        align-items: center;
        .title {
            color: @color;
            font-size: 13px;
        }

        .t_item {
            display: flex;
            align-items: center;

            .item_name {
                margin: 0 10px;
                padding: 2px 8px;
                font-size: 12px;
                cursor: pointer;
                border-radius: 10px;
                color: @fzFontColor;

                &:hover {
                    color: #d33a31;
                    background-color: @fzSeledBg;
                }
            }

            .active {
                color: #d33a31;
                background-color: @fzSeledBg;
            }
        }

    }

    .item-grid {
        padding-top: 15px;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        .g-item {
            width: 100%;
            cursor: pointer;
        }
        .g-item-img {
            position: relative;
            width: 100%;
            height: 180px;
            border-radius: 6px;
            background-color: #f8f8f8;
        }
        .g-i-desc {
            padding-top: 8px;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
            color: @color;
            font-size: 14px;

            &:hover {
                color: @hoverColor;
            }
        }
    }
    
}
</style>